<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <table>
        <caption>用户登录</caption>
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="text" id="password"></td>
        </tr>
    </table>
    <button id="login">登录</button>
</body>
<script>
    $(function () {
        $("#login").click(function () {
            let username = $("#username").val();
            let password = $("#password").val();
            $.ajax({                    // 标准化模板，不用死记
                // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                url:"/loginServlet",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                async:true,             // 是否异步，true是默认值，false为同步请求
                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                data:{                  // 传递给后台参数名和参数值
                    username:username,
                    password:password
                },
                success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                    console.log(response);
                    alert(response.msg);
                    if(response.code === 200) {
                        window.location.href="index.html";
                    }
                },
                error:function(response){          // 如果请求失败，则会执行error函数
                    alert("出错" + response);
                }
            });
        });
    });
</script>
</html>